import { MenuUnfoldOutlined } from '@ant-design/icons';
import "./index.less"
import { Breadcrumb } from 'antd';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import { ReducersType } from '@/redux/store';




interface propsType {
    toggleCollapsed: Function,
    name: string
}


export default function Header(props: propsType) {

    const BreadList = useSelector((state: ReducersType) => {
        return state.BreadReducer
    })


    const toggleCollapsed = () => {
        props.toggleCollapsed()
    }

    return (
        <div className='home_header flex_a'>
            <div className='home_collspae flex_a_j' onClick={toggleCollapsed} >
                <MenuUnfoldOutlined style={{ fontSize: '20px' }} />
            </div>
            <div >
                {/* <Breadcrumb separator="|" className='Bread'>
                    {
                        BreadList.map((item: breadType) => {
                            return (
                                item.herf ? <Breadcrumb.Item href={item.herf} key={item.label} >{item.icon ? item.icon : undefined} {item.label}</Breadcrumb.Item> : <Breadcrumb.Item key={item.label} >{item.icon ? item.icon : undefined} {item.label}</Breadcrumb.Item>
                            )
                        })
                    }
                </Breadcrumb> */}
            </div>
            <div className='home_person flex_a'>
                <img src="/image/header.png" alt="" />
                <span>{props.name}</span>
            </div>
        </div>
    )
}